<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import CodeEditor from '@/components/CodeEditor.vue'
import QuestionSelector from './QuestionSelector.vue'
import { ref, defineExpose, defineEmits } from 'vue'
import { addQuestionService, editQuestionService, getQuestionDetailsService } from '@/apis/question'
import { ElMessage } from 'element-plus'

const visibleDrawer = ref(false)

const formQuestion = ref({
  questionId: '',
  title: '',
  difficulty: '',
  timeLimit: '',
  spaceLimit: '',
  content: '',
  questionCase: '',
  defaultCode: '',
  mainFuc: ''
})

const defaultCodeRef = ref()
const mainFucRef = ref()

const open = async (questionId) => {
  visibleDrawer.value = true
  for (let key in formQuestion.value) {
    formQuestion.value[key] = ''
  }

  if (questionId) {
    const res = await getQuestionDetailsService(questionId)
    Object.assign(formQuestion.value, res.data)
  }

  // 设置代码内容
  defaultCodeRef.value.setAceCode(formQuestion.value.defaultCode)
  mainFucRef.value.setAceCode(formQuestion.value.mainFuc)
}

defineExpose({
  open
})

const emit = defineEmits(['success'])
const onSubmit = async () => {
  const fd = new FormData()
  for (let key in formQuestion.value) {
    fd.append(key, formQuestion.value[key])
  }
  try {
    if (formQuestion.value.questionId) {
      await editQuestionService(fd)
      ElMessage.success('编辑成功')
      emit('success', 'edit')
    } else {
      await addQuestionService(fd)
      ElMessage.success('添加成功')
      emit('success', 'add')
    }
  } catch (erro) {
  } finally {
    visibleDrawer.value = false
  }
}

const handleEditorContent = (content) => {
  formQuestion.value.defaultCode = content
}

const handleEditorMainFunc = (content) => {
  formQuestion.value.mainFuc = content
}
</script>

<template>
  <el-drawer
    v-model="visibleDrawer"
    :with-header="false"
    :lock-scroll="false"
    :destroy-on-close="true"
    size="50%"
  >
    <el-form :model="formModel" ref="formRef">
      <el-form-item label="题目标题:">
        <el-input
          style="width: 387px !important"
          v-model="formQuestion.title"
          placeholder="请输入标题"
        ></el-input>
      </el-form-item>

      <el-form-item label="题目难度:">
        <question-selector
          style="width: 387px !important"
          v-model="formQuestion.difficulty"
          width="100%"
          placeholder="请选择题目难度"
        >
        </question-selector>
      </el-form-item>

      <el-form-item label="时间限制（单位毫秒）:">
        <el-input
          style="width: 300px !important"
          v-model="formQuestion.timeLimit"
          placeholder="请输入时间限制"
        ></el-input>
      </el-form-item>

      <el-form-item label="空间限制（单位字节）:">
        <el-input
          style="width: 300px !important"
          v-model="formQuestion.spaceLimit"
          placeholder="请输入空间限制"
        ></el-input>
      </el-form-item>

      <el-form-item label="题目内容:">
        <div class="editor">
          <quill-editor
            placeholder="请输入题目内容"
            v-model:content="formQuestion.content"
            content-type="html"
          >
          </quill-editor>
        </div>
      </el-form-item>

      <el-form-item label="题目用例:">
        <el-input
          style="width: 387px !important"
          v-model="formQuestion.questionCase"
          placeholder="请输入题目用例"
        ></el-input>
      </el-form-item>

      <el-form-item label="默认代码块:">
        <code-editor ref="defaultCodeRef" @update:value="handleEditorContent"></code-editor>
      </el-form-item>

      <el-form-item label="main函数:">
        <code-editor ref="mainFucRef" @update:value="handleEditorMainFunc"></code-editor>
      </el-form-item>

      <el-form-item>
        <el-button class="question-button" type="primary" plain @click="onSubmit()">发布</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<script setup></script>
<style lang="scss">
.question-button {
  width: 200px;
}
</style>
